<template>
  <div id="goodsSpec">
    <el-table
        :data="specTable"
        :span-method="spanMethod"
        stripe
        style="width: 100%">
      <el-table-column
          prop="specName"
          label="属性分类名称"
          width="180"
          align="center">
      </el-table-column>
      <el-table-column
          prop="propName"
          label="详细属性名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="propValue"
          label="详细属性数值"
          width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "goodsSpec",
  components: {},
  props: ['id'],
  data() {
    return {
      specTable:[],
      spanArr:[],
      pos:0
    }
  },
  mounted() {
    this.axios.get(
        '/api/spec'
    ).then((res)=>{
      let specTable=res.data.specTable
      this.specTable=specTable
      this.getSpanArr(specTable)
    }).catch((err)=>{
      this.$message.error(err)
    })
  },
  methods:{
    // eslint-disable-next-line no-unused-vars
    spanMethod({row,column,rowIndex,columnIndex}){
      if(columnIndex==0){
        const _row=this.spanArr[rowIndex];
        const _col=_row>0?1:0;
        return{
          rowspan:_row,
          colspan:_col
        }

      }
    },
    getSpanArr(data){
      for(var i=0;i<data.length;i++){
        if(i==0){
          this.spanArr.push(1);
          this.pos=0
        }else {
        //  判断当前元素与上一个是否相同
          if(data[i].specName==data[i-1].specName){
            this.spanArr[this.pos]+=1;
            this.spanArr.push(0);
          }else{
            this.spanArr.push(1);
            this.pos=i;
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
